<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { statlistApi } from '../../api/index'
import { useRouter } from 'vue-router'
import ViewCar from './components/cars.vue'
const router = useRouter()
const getcurrentDate = new Date();
const list = ref([])
const pic = ref()
const car = ref()
const carshow = ref(false)
const show = ref(true)
const initialDatefront = ref()
const initialTimefront = ref()
const initialDateend = ref()
const initialTimeend = ref()
const showBottom = ref(false) //起始日期弹窗开关
const showBottoms = ref(false) //起始时间弹窗开关
const showBottomend = ref(false) //终止日期弹窗开关
const showBottomsend = ref(false) //终止时间弹窗开关
const currentDateend = ref(['', '', '']) //起始日期
const currentTimeend = ref(['00','00']) //起始日期时间
const currentDatefront= ref([getcurrentDate.getFullYear(), getcurrentDate.getMonth() + 1, getcurrentDate.getDate()]) //起始日期，当天日期
const currentTimefront= ref(['00','00']) //起始日期时间
// 初始化日期
const timecl = function () {
    if (getcurrentDate.getMonth() + 1 < 10) {
        currentDatefront.value[1] = '0' + (getcurrentDate.getMonth() + 1)
    }
    if (getcurrentDate.getDate() < 10) {
        currentDatefront.value[2] = '0' + getcurrentDate.getDate()
    }
    // 获取明天的日期
    const previousDate = new Date()
    previousDate.setDate(previousDate.getDate() + 1);
    // 获取明天的年、月、日
    const year = previousDate.getFullYear();
    const month = previousDate.getMonth() + 1;
    const day = previousDate.getDate();
    // 格式化前一天的日期字符串
    const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
    console.log(formattedDate)
    currentDateend.value[0] = year
    currentDateend.value[1] = month < 10 ? '0' + month : month
    currentDateend.value[2] = day < 10 ? '0' + day : day
}

// 获取看板列表
const getstatlistApi = async function () {
    console.log('nihao')
    show.value = true
    try {
        console.log('nihao')
        const res = await statlistApi({
            StartTime: `${currentDatefront.value[0]}-${currentDatefront.value[1]}-${currentDatefront.value[2]} ${currentTimefront.value[0]}:${currentTimefront.value[1]}:00`,
            EndTime:`${currentDateend.value[0]}-${currentDateend.value[1]}-${currentDateend.value[2]} ${currentTimeend.value[0]}:${currentTimeend.value[1]}:00`,
        })
        if (res.data.code == 0) {
            show.value = false
            list.value = res.data.data
            pic.value = res.data.piceSum
        } else {
        }
    } finally {
        show.value = false
    }
}
// 选择起日期后点击确定
const determinefront = function () {
    // 将时间给保存起来
    initialTimefront.value = currentTimefront.value
    showBottom.value = false
    showBottoms.value = true
}
// 选择起日期后点击取消
const cancellationfront = function () {
    // 日期取消后，要复原，将保存起来的值重新赋值给currentDatefront
    currentDatefront.value = initialDatefront.value
    showBottom.value = false
}
const closeDatefront = function () {
    console.log('nihao')
    // 日期取消后，要复原，将保存起来的值重新赋值给currentDatefront
    currentDatefront.value = initialDatefront.value
    showBottom.value = false
}
// 选择起时间后点击确定
const determinesfront = function () {
    showBottoms.value = false
     getstatlistApi()
}
// 选择起时间后点击取消
const cancellationsfront = function () {
    // 时间取消后，要复原，将保存起来的值重新赋值给currentTimefront
    currentTimefront.value = initialTimefront.value
    showBottoms.value = false
    getstatlistApi()
}
const closeTimefront = function () {
    // 时间取消后，要复原，将保存起来的值重新赋值给currentTimefront
    currentTimefront.value = initialTimefront.value
    showBottoms.value = false
    getstatlistApi()
}


// 终日期点击确定
const determineend = function () {
    initialTimeend.value = currentTimeend.value
    showBottomend.value = false
    showBottomsend.value = true
}
// 终日期点击取消
const cancellationend = function () {
    // 日期取消后，要复原，将保存起来的值重新赋值给currentDatefront
    currentDateend.value = initialDateend.value
    showBottomend.value = false
}

const closeDateend = function () {
    // 日期取消后，要复原，将保存起来的值重新赋值给currentDatefront
    currentDateend.value = initialDateend.value
    showBottomend.value = false
}

// 终时间点击确定
const determinesend = function () {
    showBottomsend.value = false
    getstatlistApi()
}
// 终时间点击取消
const cancellationsend = function () {
    currentTimeend.value = initialTimeend.value
    showBottomsend.value = false
    getstatlistApi()
}
const closeTimeend = function () {
    currentTimeend.value = initialTimeend.value
    showBottomsend.value = false
    getstatlistApi()
}

// 打开起始日期弹出框
const popupshow = function () {
    // 将当前的日期保存起来
    initialDatefront.value = currentDatefront.value
    showBottom.value = true
}
// 打开终止日期弹窗框
const popupshowend = function () {
    initialDateend.value = currentDateend.value
    showBottomend.value = true
}

const viewcar = function (val) {
    if(val.cars.length !== 0){
        carshow.value = true
        nextTick(() => {
            car.value.showload(val.cars)
        })
    }
}

const carqx = function () {
    carshow.value = false
}
const pushDate = function () {
    router.push({path:'/DateRevenue'})
}
onMounted(() => {
    timecl()
    getstatlistApi()
})
</script>
<template>
    <van-overlay :show="show">
        <div class="wrapper" >
            <van-loading type="spinner" />
        </div>
    </van-overlay>
<div>
    <div style="width: 100%;background-color: #EFCB7B;overflow: auto;">
        <div style="height:.8rem;margin-left:.1567rem;margin-top: .5333rem;padding: .1333rem;font-size: .4rem;margin-bottom: .2667rem;display: flex;justify-content: space-between;">
            <div style="background-color: #F4DAA1;padding:.1067rem .2133rem;border-radius: .08rem;display: flex;align-items: center;justify-content: center;width: 3.6rem;">
                <span style="margin-right: .1867rem;">产品统计</span>
                <span style="margin-right: .2667rem;width: .0167rem;height: .5333rem;background-color: #000;"></span>
                <span>
                    <van-icon name="shopping-cart-o" size=".4867rem"/>
                </span>
            </div>
            <div @click="pushDate" style="background-color: #F4DAA1;padding:.1067rem .2133rem;border-radius: .08rem;display: flex;align-items: center;justify-content: center;width: 3.6rem;">
                <span style="margin-right: .1867rem;">小时统计</span>
                <span style="margin-right: .2667rem;width: .0167rem;height: .5333rem;background-color: #000;"></span>
                <span>
                    <van-icon name="shopping-cart-o" size=".4867rem"/>
                </span>
            </div>
        </div>
        <div style="display: flex;padding: .4rem;flex-direction: column;">
            <div style="font-size: .4rem;" >
                <span @click="popupshow">
                    <span style="height: .5333rem;line-height: .5333rem;margin-right: .09333rem;">
                    {{ currentDatefront[0] }}-{{ currentDatefront[1] }}-{{ currentDatefront[2] }} {{ currentTimefront[0] }}:{{ currentTimefront[1] }}
                    </span>
                    <van-icon name="arrow-down" />
                </span>
                至
                <span @click="popupshowend">
                    <span style="height: .5333rem;line-height: .5333rem;margin-right: .09333rem;">
                    {{ currentDateend[0] }}-{{ currentDateend[1] }}-{{ currentDateend[2] }} {{ currentTimeend[0] }}:{{ currentTimeend[1] }}
                    </span>
                    <van-icon name="arrow-down" />
                </span>
            </div>
           
        </div>
    </div>
    <div style="padding: .1867rem;background-color: #F2F3F5;">
        <div   style="background-color: #fff;">
            <div style="height:.8rem;font-size: .3733rem;display: flex;align-items: center;background-color: #FAFAFA;padding: .2133rem;justify-content: space-between">
                <div>
                    {{ currentDatefront[1] }}月{{ currentDatefront[2]}}日 - {{ currentDateend[1] }}月{{ currentDateend[2] }}日
                </div>
                <div>
                <span style="font-size: .6rem;">¥{{ pic }}</span>
                </div>
            </div>
            <div  v-for="(item,index) in list" :key="index" style="height: 1.533rem;padding: .2133rem;">
                <div @click="viewcar(item)" style="display: flex;height: 100%;justify-content: space-around;flex-direction: column;border-bottom: .0267rem solid #E5E6EB;">
                    <div style="font-size: .3733rem;font-weight: 600;">{{item.title}}</div>
                    <div style="display: flex;width: 100%;justify-content: space-between">
                        <div style="font-size: .32rem;color: #86909C;"  >数量:{{ item.count }}</div>
                        <div style="font-size: .3733rem;color: #ED702D;font-weight: 600;">+{{ item.price }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 起日期 -->
    <van-popup
        @click-overlay="closeDatefront"
        v-model:show="showBottom"
        round
        position="bottom"
        :style="{ height: '50%' }"
        >
        <van-date-picker
                v-model="currentDatefront"
                title="选择起始日期"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="determinefront"
                @cancel="cancellationfront"
            />
    </van-popup>
    <!-- 起时间 -->
    <van-popup
    @click-overlay="closeTimefront"
        v-model:show="showBottoms"
        round
        position="bottom"
        :style="{ height: '50%' }"
        >
        <van-time-picker v-model="currentTimefront" title="选择起始时间"   @confirm="determinesfront"
                @cancel="cancellationsfront"/>
    </van-popup>

    <!-- 终日期 -->
    <van-popup

        v-model:show="showBottomend"
        @click-overlay="closeDateend"
        round
        position="bottom"
        :style="{ height: '50%' }"
        >
        <van-date-picker
                v-model="currentDateend"
                title="选择终止日期"
                @confirm="determineend"
                @cancel="cancellationend"
            />
    </van-popup>
    <!-- 终时间 -->
    <van-popup
        v-model:show="showBottomsend"
        @click-overlay="closeTimeend"
        round
        position="bottom"
        :style="{ height: '50%' }"
        >
        <van-time-picker v-model="currentTimeend" title="选择终止时间"   @confirm="determinesend"
                @cancel="cancellationsend"/>
    </van-popup>
    <ViewCar ref="car" v-if="carshow" @carqx="carqx"></ViewCar>
</div>
    
   
</template>
<style scoped> 
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }
</style>